<template>
  <div class="realName">
    <div class="banner"></div>
    <div class="top-block">
      <div class="m1000">
        <div class="realName-title text-center">
          <h2>微信小程序(OCR)实名制登记</h2>
          <p>手机扫描身份证，智能识别提取证件信息，并通过人脸识别进行身份验证 <span class="orange">（仅适用于二代身份证）</span></p>
        </div>
        <div class="relative">
          <section class="text-style tb1">
            <h3><i>01</i>进入小程序</h3>
            <p>微信扫描右侧小程序码进入<span class="orange">“新疆工程建设云小程序”</span> 或微信搜索<span class="orange">新疆工程建设云从业人员服务平台”</span>“</p>
          </section>
          <section class="tb2">
            <div class="ewm"><img src="/public/resource/image/xcx-code.jpg" alt=""></div>
            <div class="ewm_title">新疆工程建设云小程序</div>
          </section>
          <section class="tb3">
            <img src="/public/resource/realName/realName-i1.png" alt="">
          </section>
          <section class="text-style tb4">
            <h3><i>02</i>实名制登记</h3>
            <p>登录小程序，进行实名认证，选择<span class="orange">“微信小程序（OCR）实名制登记”</span> ，根据页面引导完成实名认证</p>
          </section>
        </div>
      </div>
    </div>
    <div class="bottom-block">
      <div class="m1000">
        <div class="relative">
          <div class="realName-title text-center">
            <h2>外籍人员实名认证</h2>
          </div>
          <section class="text-style tb1">
            <h3><i>01</i>现场采集</h3>
            <p>外籍人员无法通过上述方式完成认证的，<span class="orange">请本人携带身份证件原件至建筑市场监管处</span>进行身份信息现场采集</p>
            <p>地址：乌鲁木齐市中山路462号人民广场联合大厦A座13楼建筑市场监管处</p>
          </section>
          <section class="tb2">
            <img src="/public/resource/realName/realName-map.png" alt="">
          </section>
          <section class="tb3">
            <img src="/public/resource/realName/realName-i2.png" alt="">
          </section>
          <section class="text-style tb4">
            <h3><i>02</i>绑定微信</h3>
            <p>登录新疆工程建设云小程序，选择<span class="orange">“已完成实名制信息采集，绑定微信”</span>，根据页面引导完成微信绑定</p>
          </section>
        </div>
      </div>

    </div>

  </div>

</template>

<script lang="ts">
import { defineComponent, onMounted  } from 'vue';

export default defineComponent({
  name: 'realName',
  components: {} ,
  setup() {


    const init = () => {

    }

    onMounted(init);

    return {


    }
  }
})
</script>

<style lang="less" scoped>
.realName {
  .banner{
    height: 454px;
    background: url("/public/resource/realName/realName-banner.png") no-repeat center;
  }

  .m1000{
    width: 1000px;
    margin: 0 auto;
  }

  .text-center{
    text-align: center;
  }

  .text-style{
    h3{
      margin-bottom: 10px;
      font-size: 28px;
      font-weight: bold;

      i{
        display: inline-block;
        margin-right: 10px;
        font-size: 46px;
        font-style: italic;
        font-weight: bold;
        color: #4F90C6;
        transform: translateY(5px);
      }
    }

    p{
      font-size: 16px;
      line-height: 2;
    }
  }

  .top-block{
    padding: 60px 0;
    background: #F9FBFF;

    .realName-title{
      h2{
        margin-bottom: 15px;
        font-size: 36px;
        font-weight: bold;
        color: #111;
        text-align: center;
      }

      p{
        font-size: 18px;
      }
    }

    .relative{
      position: relative;
      height: 850px;

      .tb1{
        position: absolute;
        top: 100px;
        left: 0;
        width: 400px;
      }

      .tb2{
        position: absolute;
        top: 60px;
        right: 0;
        width: 370px;

        .ewm{
          width: 307px;
          height: 277px;
          padding-top: 50px;
          margin: 0 auto;
          text-align: center;
          background: white;
          box-shadow: 0 3px 10px rgba(21, 91, 139, 0.06);

          img{
            width: 196px;
          }
        }

        .ewm_title{
          width: 370px;
          height: 62px;
          font-size: 20px;
          line-height: 60px;
          text-align: center;
          background: #FFF;
          border-radius: 30px;
          box-shadow: 0 3px 10px rgba(21, 91, 139, 0.06);
        }
      }

      .tb3{
        position: absolute;
        top: 400px;
        left: 0;
        width: 421px;
      }

      .tb4{
        position: absolute;
        top: 550px;
        right: 0;
        width: 390px;
      }

    }
  }

  .bottom-block{
    padding: 60px 0;
    background: white;

    .relative{
      position: relative;
      height: 850px;

      .realName-title{
        h2{
          margin-bottom: 15px;
          font-size: 36px;
          font-weight: bold;
          color: #111;
          text-align: center;
        }
      }

      .tb1{
        position: absolute;
        top: 90px;
        left: 0;
        width: 400px;
      }

      .tb2{
        position: absolute;
        top: 115px;
        right: 0;
        width: 370px;
      }

      .tb3{
        position: absolute;
        top: 400px;
        left: 0;
        width: 421px;
      }

      .tb4{
        position: absolute;
        top: 550px;
        right: 0;
        width: 390px;
      }
    }
  }
}
</style>

